<template>
	<view class="game-box" v-if="productList.length > 0">
		<view class="game-type">
			<view class="typeItem" v-for="(item,index) in categoryList" :key="item.id" :class="index === categoryIndex?'active':''" @click="changeCategory(index)">
				{{item.name}}
			</view>
		</view>
		<view class="game-list">
			<view class="game-tit">
				<view class="tit-left">
					{{categoryList[this.categoryIndex].name}}
				</view>
				<view class="tit-right">
					更多
				</view>
			</view>
			<view class="game-item" v-for="item in productList" :key="item.id" @click="gotoPath(`/pages/gameInfo/gameInfo?id=${item.id}`)">
				<view class="game-image">
					<image :src="item.cover_image"
						mode="widthFix"></image>
				</view>
				<view class="game-info">
					<view class="tit">
						{{item.name}}
					</view>
					<view class="pir">
						<view class="yj">
							￥{{item.original_price}}
						</view>
						<view class="xj">
							<text style="font-size: 12px;">￥</text>{{item.price}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCategoryList,
		getProductList
	} from '@/api/shop/shop.js'
	export default {
		data() {
			return {
				categoryList: [],
				productList: [],
				categoryIndex:0,
				productForm:{
					game_id:"",
					category_id:"",
					keyword:"",
					page:1,
					pageSize:20
				}
			}
		},
		async onLoad() {
			await this.getCategoryListData()
			await this.getProductListData()
		},
		methods: {
			// 获取商品分类
			async getCategoryListData() {
				try {
					const res = await getCategoryList({})
					this.categoryList = res.data.category;
					this.productForm.category_id = this.categoryList[0].id;
				} catch (error) {
					throw Error(error)
				}
			},

			// 获取商品列表
			async getProductListData() {
				try {
					const res = await getProductList(this.productForm)
					this.productList = res.data.product;
				} catch (error) {
					throw Error(error)
				}
			},
			
			changeCategory(index){
				this.categoryIndex = index;
				this.productForm.category_id = this.categoryList[index].id;
				this.getProductListData();
			},
			
			gotoPath(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.game-box {
		display: flex;
		min-height: 100vh;

		.game-type {
			width: 160rpx;

			.typeItem {
				text-align: center;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 24rpx;
			}

			.active {
				background-color: #fff;
				position: relative;

				&::after {
					content: '';
					display: inline-block;
					width: 4px;
					height: 40rpx;
					border-radius: 4px;
					background-color: rgb(3, 91, 255);
					position: absolute;
					top: 50%;
					left: 0px;
					transform: translateY(-50%);
				}
			}
		}

		.game-list {
			flex: 1;
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;

			.game-tit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 26rpx;

				.tit-left {}

				.tit-right {
					color: #999;
				}
			}

			.game-item {
				display: flex;
				border-bottom: 1px #f9f9f9 solid;
				padding: 25rpx 0px;

				.game-image {
					width: 140rpx;
					height: 140rpx;
					font-size: 0px;
					margin-right: 15rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}

				.game-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.tit {
						font-size: 30rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						
						/* 兼容性处理 */
						line-clamp: 2;
						box-orient: vertical;
						
						/* 文本换行设置 */
						word-wrap: break-word;
						word-break: break-word;
					}

					.pir {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.yj {
							color: #999;
							font-size: 24rpx;
							text-decoration: line-through;
						}

						.xj {
							color: red;
						}
					}
				}
			}
		}
	}
</style>